<template>
    <div>
        <el-form :inline="true" :model="studentFrom" class="demo-form-inline">
            <el-form-item label="学生编号">
                <el-input v-model="studentFrom.sid" placeholder="学生编号"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名">
                <el-input v-model="studentFrom.sname" placeholder="学生姓名"></el-input>
            </el-form-item>
            <el-form-item label="学生年龄">
                <el-input v-model="studentFrom.sage" placeholder="学生年龄"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="init">查询</el-button>

            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="add">添加</el-button>
            </el-form-item>
            ‘
            <el-form-item>
                <el-button type="danger" @click="open">批量删除</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="student"
                border
                @selection-change="handleSelectionChange"

                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="sid"
                    label="学生编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="sname"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="sage"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="school.cname"
                    label="班级">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" icon="el-icon-edit" @click="upt(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <!--修改-->
        <el-dialog
                title="修改学生信息"
                :visible.sync="dialogVisible"
                width="30%">
            <!--:before-close="handleClose"-->
            <el-form ref="form" :model="studentUpFrom" label-width="80px">
                <el-form-item label="学生id">
                    <el-input v-model="studentUpFrom.sid"></el-input>
                </el-form-item>
                <el-form-item label="学生姓名">
                    <el-input v-model="studentUpFrom.sname"></el-input>
                </el-form-item>
                <el-form-item label="学生年龄">
                    <el-input v-model="studentUpFrom.sage"></el-input>
                </el-form-item>
                <!--   <el-form-item label="学生班级">
                       <el-input v-model="studentUpFrom.cid"></el-input>
                   </el-form-item>-->
                <el-form-item label="班级">
                    <el-select v-model="studentUpFrom.cid" placeholder="请选择">
                        <el-option
                                v-for="item in Class"
                                :key="item.cid"
                                :label="item.cname"
                                :value="item.cid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-button @click="quxiao">取 消</el-button>
            <el-button type="primary" @click="sur">确 定</el-button>
        </el-dialog>
        <!--添加-->
        <el-dialog
                title="添加学生信息"
                :visible.sync="add1"
                width="30%">
            <!--:before-close="handleClose"-->
            <el-form ref="form" :model="studentAddFrom" label-width="80px">
                <el-form-item label="学生姓名">
                    <el-input v-model="studentAddFrom.sname"></el-input>
                </el-form-item>
                <el-form-item label="学生年龄">
                    <el-input v-model="studentAddFrom.sage"></el-input>
                </el-form-item>
                <el-form-item label="学生班级">
                    <el-input v-model="studentAddFrom.cid"></el-input>
                </el-form-item>
            </el-form>
            <el-button @click="add1 = false">取 消</el-button>
            <el-button type="primary" @click="ok">确 定</el-button>
        </el-dialog>
        <el-dialog
                title="确认删除吗"
                :visible.sync="shanchu"
                width="30%">
            <!--:before-close="handleClose"-->
            <el-button @click="qu">取 消</el-button>
            <el-button type="primary" @click="yes">确 定</el-button>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                shanchu: false,
                //添加
                studentAddFrom: {},
                //添加按钮弹窗
                add1: false,
                //修改
                studentUpFrom: {},
                //修改弹窗
                dialogVisible: false,
                //查询
                studentFrom: {},
                //页码
                student: [],
                //默认页
                currentPage: 1,
                //默认每页几条
                pageSize: 5,
                //总条数
                total: 0,
                //下拉框
                Class: [],
                //获取选框的值
                multipleSelection: []
            }
        },
        created() {/*this.指vue对象*/
            this.init();
            this.all()
        },
        methods: {
            //查询全部
            init() {
                this.axios.post("http://localhost:8080/student/find/" + this.currentPage + "/" + this.pageSize, this.studentFrom).then(result => {

                    this.student = result.data.data.records
                    this.total = result.data.data.total;

                })
            },
            //点击第几页变化
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.init();
           //点击第几页变化
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.init();
            },
            //删除
            del(row) {
                let sid = row.sid;
                this.axios.delete("http://localhost:8080/student/delete/" + sid).then(result => {
                    if (result.data.code == 200) {
                        this.$message.success("删除成功")//弹出成功的消息框
                        this.init();//回调init
                    }
                })

            },
            //点击编辑弹窗
            upt(row) {
                this.dialogVisible = true;
                this.studentUpFrom = row;
            },
            quxiao() {
                this.dialogVisible = false;
                this.init();
            },


            //修改确认按钮
            sur() {
                this.axios.put("http://localhost:8080/student/update", this.studentUpFrom).then(result => {
                    //  console.log("ssssssjhhhhhhhhhhhh")
                    if (result.data.code == 200) {
                        this.$message.success("修改成功");
                        this.init();
                    }
                    this.dialogVisible = false;
                })
            },
            //点击添加弹窗
            add() {
                this.add1 = true;

            },
            //确认添加
            ok() {
                this.axios.post("http://localhost:8080/student/insert", this.studentAddFrom).then(result => {
                    //   console.log("22222")
                    if (result.data.code == 200) {
                        this.$message.success("添加成功");
                        this.init();
                    }
                })
                this.add1 = false;
            },
            //下拉框
            all() {
                this.axios.get("http://localhost:8080/class/list").then(result => {
                    // console.log(result);
                    this.Class = result.data.data;
                })
            },
            //获取选中的值
            handleSelectionChange(val) {
                this.multipleSelection = val;


            },
            //open
            open() {
                this.shanchu = true;


            },
            qu() {
                this.shanchu = false
                this.init();

            },
            yes() {
                this.axios.post("http://localhost:8080/student/deletebach", this.multipleSelection).then(result => {
                    console.log(result);
                    if (result.data.code == 200) {
                        this.$message.success(result.data.msg);
                        this.init();
                    }
                    this.shanchu = false;
                })

            }


        }

    }
</script>

<style scoped>

</style>